<template>
  <div class="app-container partTime">
    <el-form :model="queryParam" ref="queryForm" :inline="true" style="text-align: center;">
      <el-row style="margin: auto; width: 100%; text-align: center; height: 37px;">
          <h1 style="display: inline-block; margin-top: -4px; text-align: center; color: #8b836c; font-size: 1.5rem; letter-spacing: 1px; font-family: serif;">员工管理列表</h1>
      </el-row>
      <el-form-item label="员工：" class="empNm">
        <el-select v-model="queryParam.userId" filterable placeholder="请选择（或输入）员工" clearable>
          <el-option
            v-for="item in partEmpList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            :title="item.name">
            <span>{{ item.name }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门：" class="empNm2">
        <el-select v-model="queryParam.deptId" filterable placeholder="请选择（或输入）部门" clearable>
          <el-option
            v-for="item in partDeptList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            :title="item.name">
            <span>{{ item.name }}</span>
          </el-option>
        </el-select>
      </el-form-item>

      <el-form :model="queryParam" ref="queryForm" :inline="true" style="text-align: center;">
        <el-form-item>
          <el-button class="addBtn" size="small" style="margin-right: 2px" @click="routerAdd">新增兼职</el-button>
          <el-button class="resetBtn" size="small" style="margin-right: 2px" @click="resetForm">重置</el-button>
          <el-button class="qryBtn" size="small" @click="submitForm">查询</el-button>
        </el-form-item>

        <!-- <el-form-item>
        </el-form-item> -->
      </el-form>

      <el-form :inline="true" style="text-align: center; display:  flex; flex-direction: column; justify-content: center; align-items: center;">
        <el-table
          v-loading="listLoading"
          :data="tableData"

        fit
        highlight-current-row
        style="
          width: 90%;
          border: 1px solid rgb(220, 223, 230);
          margin-bottom: 12px;
          border-radius: 10px;
          over-flow: auto;
        "
        max-height="500px"
        :header-cell-style="{
          'color':'#ffffff',
          'border-bottom-radius': '1px',
          'font-size':'0.86rem',
          'height':'8px',
          'font-family': 'serif',
          'font-weight': '800',
          'background': '#a2997f',
          'border-right-color': '#b6b6b1',
          'border-bottom-color': '#b6b6b1',
          'border-width': '1.2px'
        }"
        border>
          <el-table-column prop="id" label="编号"  min-width="8%" fixed="left" />
          <el-table-column prop="userName" label="员工"  min-width="10%" />
          <el-table-column prop="deptName" label="部门"   min-width="40%" />
          <el-table-column prop="createTime" label="创建时间"  min-width="20%" />
          <el-table-column  label="操作" align="center" width="80" fixed="left" >
            <template slot-scope="{row}">
              <el-popconfirm
                title="确定删除该记录吗？"
                @confirm="deletePart(row)">
                <el-button type="danger" size="mini" class="link-left" slot="reference" style="margin-left: 4px;">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParam.pageNum" :limit.sync="queryParam.pageSize"
          @pagination="search"/>
      </el-form>
    </el-form>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import Pagination from '@/components/Pagination'
import partApi from '@/api/parttime'

export default {
  components: { Pagination },
  data () {
    return {
      partEmpList: [],
      partDeptList: [],
      // 部门名称
      deptName: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      empStatus: [
        {
          key: '1',
          value: '启用'
        },
        {
          key: '2',
          value: '禁用'
        }
      ],
      syncParam: {
        useCache: false
      },
      queryParam: {
        userId: undefined,
        deptId: undefined,
        pageNum: 1,
        pageSize: 10
      },
      listLoading: true,
      tableData: [],
      total: 0
    }
  },
  created () {
    this.loadAll()
    this.search()
  },
  methods: {
    routerAdd() {
      this.$router.push({ path: '/user/student/partTime/add', jump: true })
    },
    deletePart(row) {
      let _this = this
      partApi.delPartTime(row.id).then(re => {
      if (re.code === 1) {
        _this.$message.success('兼职记录删除成功!')
        this.search()
      } else {
        _this.$message.error(re.message)
        _this.resetForm()
      }
    }).catch(e => {
      console.log('error:', e)
    }).finally(() => {
      _this.resetForm()
    })
    },
    loadAll() {
      partApi.getEmployeeFilterList().then(res => {
        this.partEmpList = res.response
      })

      partApi.getDepartsFilterList().then(res => {
        this.partDeptList = res.response
      })
    },
    resetForm() {
      this.queryParam = {
        userId: undefined,
        deptId: undefined,
        pageNum: 1,
        pageSize: 10
      }
      this.search()
    },
    search () {
      this.listLoading = true
      partApi.getPartTimeList(this.queryParam).then(data => {
        const re = data.response
        this.tableData = re.list
        this.total = re.total
        this.queryParam.pageNum = re.pageNum
        this.listLoading = false
      })
    },
    submitForm () {
      this.queryParam.pageNum = 1
      this.search()
    },
    levelFormatter  (row, column, cellValue, index) {
      return this.enumFormat(this.levelEnum, cellValue)
    },
    sexFormatter  (row, column, cellValue, index) {
      return this.enumFormat(this.sexEnum, cellValue)
    },
    statusFormatter (status) {
      return this.enumFormat(this.statusEnum, status)
    },
    statusTagFormatter (status) {
      return this.enumFormat(this.statusTag, status)
    },
    statusBtnFormatter (status) {
      return this.enumFormat(this.statusBtn, status)
    }
  },
  computed: {
    ...mapGetters('enumItem', [
      'enumFormat'
    ]),
    ...mapState('enumItem', {
      sexEnum: state => state.user.sexEnum,
      statusEnum: state => state.user.statusEnum,
      statusTag: state => state.user.statusTag,
      statusBtn: state => state.user.statusBtn,
      levelEnum: state => state.user.levelEnum
    })
  }
}
</script>

<style rel="stylesheet/scss" lang='scss'>
  .partTime {
    padding: 30px;
  }

  .partTime .el-form--inline .el-form-item {
    display: inline-block;
    margin-right: 10px;
    vertical-align: top;
    margin-left: 12px;
  }

  .partTime .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 2px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .partTime .el-pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    font-weight: bold;
    text-align: center;
  }

  .partTime .el-date-editor .el-range-separator {
    display: inline-block;
    height: 100%;
    padding: 0 5px;
    margin: 0;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    width: 6%;
    color: #303133;
  }

  .partTime .el-autocomplete {
    position: relative;
    display: inline-block;
    width: 100%;
  }

  .partTime .el-select {
    display: inline-block;
    position: relative;
    width: 100%;
  }

  .partTime .el-form-item {
    margin-bottom: 12px;
  }

  .partTime .el-input-number--medium {
    width: 100%;
    line-height: 34px;
  }

  .partTime .el-form-item__error {
    color: #ff4949;
    font-size: 12px;
    line-height: 1;
    padding-top: 0px;
    position: absolute;
    top: 100%;
    left: 0;
  }

</style>
